<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>danceWeui框架</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta content="black" name="apple-mobile-web-app-status-bar-style">
	<meta content="telephone=no" name="format-detection">
	<link rel="stylesheet" href="../../css/weui.min.css">
	<link rel="stylesheet" href="../../css/danceWeui.css">
	<link rel="stylesheet" href="../../../iconfont/iconfont.css">
</head>
<body>
<div class="daui-navbar bg-gradual-blue">
	<div class="daui-navbar__hd">
		<a href="javascript:history.back(-1)"><i class="iconfontzz icon-fanhuijiantou"></i>返回</a>
	</div>
	<div class="daui-navbar__bd">色彩</div>
	<div class="daui-navbar__hd">
		<a href="../index.html"><i class="iconfontzz icon-home"></i></a>
	</div>
</div>

<div class="page__bd">
	<div class="daui-headline daui-headline_left">
		<div class="daui-headline__text-area">
			<h2 class="daui-headline__title">色彩 Color</h2>
			<p class="daui-headline__desc">基础颜色和自定义颜色</p>
		</div>
	</div>
	<div>
		<div class="daui-cells__title">主色</div>
		<div class="daui-grid col-4 daui-grid_cavity">
			<div class="daui-grid__item">
				<div class="daui-grid__item-in" style="background-color: #3c9cff;">
					<span>Primary</span>
					<span>#3c9cff</span>
				</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid__item-in" style="background-color: #398ade;">
					<span>Dark</span>
					<span>#398ade</span>
				</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid__item-in" style="background-color: #9acafc;">
					<span>Disabled</span>
					<span>#9acafc</span>
				</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid__item-in text-gray" style="background-color: #ecf5ff;">
					<span>Light</span>
					<span>#ecf5ff</span>
				</div>
			</div>
		</div>
		
		<div class="daui-cells__title">成功</div>
		<div class="daui-grid col-4 daui-grid_cavity">
			<div class="daui-grid__item">
				<div class="daui-grid__item-in" style="background-color: #5ac725;">
					<span>Success</span>
					<span>#5ac725</span>
				</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid__item-in" style="background-color: #53c21d;">
					<span>Dark</span>
					<span>#53c21d</span>
				</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid__item-in" style="background-color: #a9e08f;">
					<span>Disabled</span>
					<span>#a9e08f</span>
				</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid__item-in text-gray" style="background-color: #f5fff0;">
					<span>Light</span>
					<span>#f5fff0</span>
				</div>
			</div>
		</div>
		
		<div class="daui-cells__title">信息</div>
		<div class="daui-grid col-4 daui-grid_cavity">
			<div class="daui-grid__item">
				<div class="daui-grid__item-in" style="background-color: #909399;">
					<span>Info</span>
					<span>#909399</span>
				</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid__item-in" style="background-color: #767a82;">
					<span>Dark</span>
					<span>#767a82</span>
				</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid__item-in" style="background-color: #c4c6c9;">
					<span>Disabled</span>
					<span>#c4c6c9</span>
				</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid__item-in text-gray" style="background-color: #f4f4f5;">
					<span>Light</span>
					<span>#f4f4f5</span>
				</div>
			</div>
		</div>
		
		<div class="daui-cells__title">警告</div>
		<div class="daui-grid col-4 daui-grid_cavity">
			<div class="daui-grid__item">
				<div class="daui-grid__item-in" style="background-color: #f9ae3d;">
					<span>Warning</span>
					<span>#f9ae3d</span>
				</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid__item-in" style="background-color: #f1a532;">
					<span>Dark</span>
					<span>#f1a532</span>
				</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid__item-in" style="background-color: #f9d39b;">
					<span>Disabled</span>
					<span>#f9d39b</span>
				</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid__item-in text-gray" style="background-color: #fdf6ec;">
					<span>Light</span>
					<span>#fdf6ec</span>
				</div>
			</div>
		</div>
		
		<div class="daui-cells__title">危险</div>
		<div class="daui-grid col-4 daui-grid_cavity">
			<div class="daui-grid__item">
				<div class="daui-grid__item-in" style="background-color: #f56c6c;">
					<span>Danger</span>
					<span>#f56c6c</span>
				</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid__item-in" style="background-color: #e45656;">
					<span>Dark</span>
					<span>#e45656</span>
				</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid__item-in" style="background-color: #f7b2b2;">
					<span>Disabled</span>
					<span>#f7b2b2</span>
				</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid__item-in text-gray" style="background-color: #fef0f0;">
					<span>Light</span>
					<span>#fef0f0</span>
				</div>
			</div>
		</div>
		
		<div class="daui-cells__title">深色背景</div>
		<div class="daui-grid col-3 daui-grid_cavity">
			<div class="daui-grid__item">
				<div class="daui-grid__item-in bg-red">
					<span>红色</span>
					<span>#fadbd9</span>
				</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid__item-in bg-orange">
					<span>橙色</span>
					<span>#fde6d2</span>
				</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid__item-in bg-yellow">
					<span>黄色</span>
					<span>#fbbd08</span>
				</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid__item-in bg-olive">
					<span>橄榄绿</span>
					<span>#8dc63f</span>
				</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid__item-in bg-green">
					<span>绿色</span>
					<span>#39b54a</span>
				</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid__item-in bg-cyan">
					<span>天蓝色</span>
					<span>#1cbbb4</span>
				</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid__item-in bg-blue">
					<span>蓝色</span>
					<span>#0081ff</span>
				</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid__item-in bg-purple">
					<span>紫色</span>
					<span>#6739b6</span>
				</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid__item-in bg-mauve">
					<span>木槿色</span>
					<span>#9c26b0</span>
				</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid__item-in bg-pink">
					<span>粉色</span>
					<span>#e03997</span>
				</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid__item-in bg-brown">
					<span>褐色</span>
					<span>#a5673f</span>
				</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid__item-in bg-grey">
					<span>灰色</span>
					<span>#8799a3</span>
				</div>
			</div>
		</div>
		
		<div class="daui-cells__title">淡色背景</div>
		<div class="daui-grid col-3 daui-grid_cavity">
			<div class="daui-grid__item">
				<div class="daui-grid__item-in bg-light-red">
					<span>红色浅淡色</span>
					<span>#fadbd9</span>
				</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid__item-in bg-light-orange">
					<span>橙色浅淡色</span>
					<span>#fde6d2</span>
				</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid__item-in bg-light-yellow">
					<span>黄色浅淡色</span>
					<span>#fef2ce</span>
				</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid__item-in bg-light-olive">
					<span>橄榄绿浅淡色</span>
					<span>#e8f4d9</span>
				</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid__item-in bg-light-green">
					<span>绿色浅淡色</span>
					<span>#d7f0db</span>
				</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid__item-in bg-light-cyan">
					<span>天蓝色浅淡色</span>
					<span>#d2f1f0</span>
				</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid__item-in bg-light-blue">
					<span>蓝色浅淡色</span>
					<span>#d2f1f0</span>
				</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid__item-in bg-light-purple">
					<span>紫色浅淡色</span>
					<span>#e1d7f0</span>
				</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid__item-in bg-light-mauve">
					<span>木槿色浅淡色</span>
					<span>#ebd4ef</span>
				</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid__item-in bg-light-pink">
					<span>粉色浅淡色</span>
					<span>#f9d7ea</span>
				</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid__item-in bg-light-brown">
					<span>褐色浅淡色</span>
					<span>#ede1d9</span>
				</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid__item-in bg-light-grey">
					<span>灰色浅淡色</span>
					<span>#e7ebed</span>
				</div>
			</div>
		</div>

		<div class="daui-cells__title">渐变背景</div>
		<div class="daui-grid col-2 daui-grid_cavity">
			<div class="daui-grid__item">
				<div class="daui-grid__item-in bg-gradual-red">
					<span>红色渐变</span>
					<span>#f43f3b - #ec008c</span>
				</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid__item-in bg-gradual-orange">
					<span>橙色渐变</span>
					<span>#ff9700 - #ed1c24</span>
				</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid__item-in bg-gradual-yellow">
					<span>黄色渐变</span>
					<span>#fbbd08 - #ffdb6f</span>
				</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid__item-in bg-gradual-green">
					<span>绿色渐变</span>
					<span>#39b54a - #8dc63f</span>
				</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid__item-in bg-gradual-blue">
					<span>蓝色渐变</span>
					<span>#0081ff - #1cbbb4</span>
				</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid__item-in bg-gradual-purple">
					<span>紫色渐变</span>
					<span>#9000ff - #5e00ff</span>
				</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid__item-in bg-gradual-mauve">
					<span>木槿色渐变</span>
					<span>#ec008c - #6739b6</span>
				</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid__item-in bg-gradual-pink">
					<span>粉色渐变</span>
					<span>#ec008c - #6739b6</span>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="daui-gap daui-gap_transparent"></div>
<div class="daui-footer">
	<div class="daui-footer__links">
		<a class="daui-footer__links-item" href="../index.html">DanceWeUI首页</a>
		<a class="daui-footer__links-item" href="https://gitee.com/lianlianzan/danceui" target="_blank">去码云下载</a>
	</div>
	<div class="daui-footer__text">Copyright &copy; DanceUI</div>
</div>

</body>
</html>